<!-- 首页 -->
<template>
  <div>
      <my-header></my-header>
      <my-carousel></my-carousel>
      
      <div class="w_1000">
        <el-row :gutter="20">
          <el-col :span="8"><my-cardtext :data="dataprose"></my-cardtext></el-col>
          <el-col :span="8"><my-cardtext :data="datawebpage"></my-cardtext></el-col>
          <el-col :span="8"><my-cardtext :data="dataphotograph"></my-cardtext></el-col>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="8"><my-cardtext :data="datareplenish"></my-cardtext></el-col>
          <el-col :span="8"><my-cardtext :data="datatravel"></my-cardtext></el-col>
          <el-col :span="8"><my-cardtext :data="dataHealthcare"></my-cardtext></el-col>

        </el-row>

        <el-row :gutter="20">
          <el-col :span="8"><my-cardtext :data="dataDeliciousfood"></my-cardtext></el-col>
          <el-col :span="8"><my-cardtext :data="dataParagraph"></my-cardtext></el-col>
          <el-col :span="8"><my-cardtext :data="dataGeography"></my-cardtext></el-col>

        </el-row>

      </div>
  </div>
</template>

<script>
import { ArticleList } from "@/api/data";
//引入组建
import Header from '@/components/Header';
import Carousel from '@/components/Carousel';
import CardText from '@/components/list/CardText';

export default {
  data () {
    return {
      dataprose:{
        id:'prose',
        title:'散文',
        onetitle:'日常随笔',
        link:'/Travelsketch',
        data:[]
      },//散文
      datawebpage:{
        id:'webpage',
        title:'前端',
        onetitle:'干货集锦',
        link:'/Driedgoods',
        data:[]
      },//前端


      datareplenish:{
        id:'replenish',
        title:'杂文',
        onetitle:'干货集锦',
        link:'/Driedgoods',
        data:[]
      },//杂文
      datatravel:{
        id:'travel',
        title:'旅游',
        onetitle:'艺术殿堂',
        link:'/Artscenter',
        data:[]
      },//旅游
      dataHealthcare:{
        id:'Healthcare',
        title:'养生',
        onetitle:'健康之家',
        link:'/Healthyhome',
        data:[]
      },//养生
      dataDeliciousfood:{
        id:'Deliciousfood',
        title:'美食',
        onetitle:'健康之家',
        link:'/Healthyhome',
        data:[]
      },//美食
      dataParagraph:{
        id:'Paragraph',
        title:'段子',
        onetitle:'欢笑天地',
        link:'/Laughterworld',
        data:[]
      },//段子
      dataGeography:{
        id:'Geography',
        title:'地理',
        onetitle:'人文社科',
        link:'/Socialscience',
        data:[]
      },//地理


       dataphotograph:{
        id:'photograph',
        title:'摄影',
        onetitle:'艺术殿堂',
        link:'/Artscenter',
        data:[]
      }//摄影
    };
  },
  /**ajax数据初始化钩子 */
  async  mounted() {
      //散文
      let prosetype = 'prose';
      let prosejson = new Object();
      prosejson.page = 1;
      prosejson.limit = 5;
      const resprose = await ArticleList(prosejson, prosetype);
      if (resprose.code == 0) {
        this.dataprose.data=resprose.data;
      }

      //感悟
      let webpagetype = 'webpage';
      let webpagejson = new Object();
      webpagejson.page = 1;
      webpagejson.limit = 5;
      const reswebpage = await ArticleList(webpagejson, webpagetype);
      if (reswebpage.code == 0) {
        this.datawebpage.data=reswebpage.data;
      }

      //摄影
      let photographtype = 'photograph';
      let photographjson = new Object();
      photographjson.page = 1;
      photographjson.limit = 5;
      const resphotograph = await ArticleList(photographjson, photographtype);
      if (resphotograph.code == 0) {
        this.dataphotograph.data=resphotograph.data;
      }


      //杂文
      let replenishtype = 'replenish';
      let replenishjson = new Object();
      replenishjson.page = 1;
      replenishjson.limit = 5;
      const resreplenish = await ArticleList(replenishjson, replenishtype);
      if (resreplenish.code == 0) {
        this.datareplenish.data=resreplenish.data;
      }

      //旅游
      let traveltype = 'travel';
      let traveljson = new Object();
      traveljson.page = 1;
      traveljson.limit = 5;
      const restravel = await ArticleList(traveljson, traveltype);
      if (restravel.code == 0) {
        this.datatravel.data=restravel.data;
      }

      //养生
      let Healthcaretype = 'Healthcare';
      let Healthcarejson = new Object();
      Healthcarejson.page = 1;
      Healthcarejson.limit = 5;
      const resHealthcare = await ArticleList(Healthcarejson, Healthcaretype);
      if (resHealthcare.code == 0) {
        this.dataHealthcare.data=resHealthcare.data;
      }

      //美食
      let Deliciousfoodtype = 'Deliciousfood';
      let Deliciousfoodjson = new Object();
      Deliciousfoodjson.page = 1;
      Deliciousfoodjson.limit = 5;
      const resDeliciousfood = await ArticleList(Deliciousfoodjson, Deliciousfoodtype);
      if (resDeliciousfood.code == 0) {
        this.dataDeliciousfood.data=resDeliciousfood.data;
      }

      //段子
      let Paragraphtype = 'Paragraph';
      let Paragraphjson = new Object();
      Paragraphjson.page = 1;
      Paragraphjson.limit = 5;
      const resParagraph = await ArticleList(Paragraphjson, Paragraphtype);
      if (resParagraph.code == 0) {
        this.dataParagraph.data=resParagraph.data;
      }

      //地理
      let Geographytype = 'Geography';
      let Geographyjson = new Object();
      Geographyjson.page = 1;
      Geographyjson.limit = 5;
      const resGeography = await ArticleList(Geographyjson, Geographytype);
      if (resGeography.code == 0) {
        this.dataGeography.data=resGeography.data;
      }
  },
  components:{
      'my-header':Header,
      'my-carousel':Carousel,
      'my-cardtext':CardText
  }
}
</script>
<style scoped>

</style>